window.onload = function(){
    let lsitNode = document.querySelector('#list');
let appListData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
];

let apiContentData = [
     //第一行
  { img: "API_01.jpg", name: "2021出行防疫政策指南1", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

  //第二行
  { img: "API_01.jpg", name: "2021出行防疫政策指南2", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第三行
  { img: "API_01.jpg", name: "2021出行防疫政策指南3", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第四行
  { img: "API_01.jpg", name: "2021出行防疫政策指南4", price: "免费", isSpecial: false },
  { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
]

appListData.forEach((item,index) => {
    let li = document.createElement("li");
    li.innerHTML = item.name;
    if(index === 0) li.className = 'active';
    if(item.isnew) li.className = 'bold';
    li.setAttribute('title',item.keyword);
    lsitNode.appendChild(li);
    clickBtn(li,item)
});

let scherNode = document.querySelector(".name");
let inputNode = document.querySelector(".serach input");
let lilist = document.querySelectorAll("#list li");
let apiConten = document.querySelector("#apiConent")
let pageList = document.querySelector("#pageNum");
let loginBtn = document.querySelector(".right-box .border")
let newArr = [];
let pageNum = 2;
lsitNode.addEventListener("click",(e)=>{
    if(e.target.nodeName === "LI"){
        lilist.forEach((item,index)=>{
            item.classList.remove("active");
            
        })
        e.target.classList.add("active");
        scherNode.innerHTML = e.target.innerText;
        inputNode.value = e.target.title;
    }  
});

function getNum(){
    let currenpage = 0;
    for(let i = 0;i < apiContentData.length / 2; i++){
        newArr.push(apiContentData.slice(currenpage,pageNum));
        currenpage += 2;
        pageNum += 2;
        if(i>=2){
            creatorSelct(i)
        }else{
            let span = document.createElement("span");
            span.innerHTML = i+1;
            pageList.appendChild(span);
        };
    }
    function creatorSelct(index){
        if(index === 2){
            let select = document.createElement("select");
            select.innerHTML = "...";
            select.className = "model";
            pageList.appendChild(select);
            this.selectNode = document.querySelector("select");
        }
        let option = document.createElement('option');
        option.innerHTML = index+1;
        document.querySelector("select").appendChild(option);
        document.querySelector("select").onchange = ()=>{
            let i = document.querySelector("select").value -1;
            getPageNum(newArr[i]);
        };
        
    }
    let spanArr = document.querySelectorAll("#pageNum span");
    spanArr[0].classList.add("spanActive");
    getPageNum(newArr[0])
   //console.log(newArr)
};

getNum();


function getPageNum(pageArr){
    apiConten.innerHTML = "";
    pageArr.forEach((item)=>{
        console.log(item)
        apiConten.innerHTML +=  ` <li>
            <span class = "${item.isSpecial ? "on" : ""}">企业专用</span>
            <div class="tcenter mt50">
                <img src="./imgs/${item.img}" alt="">
                <h4 class="c6">${item.name}</h4>
                <p class="${item.price ==="免费" ? "green" : "red"}">${item.price}</p>
            </div>
            <a href="#">申请数据</a>
        </li>`
    })
};

pageList.addEventListener("click",(v)=>{
    if(v.target.nodeName === "SPAN"){
        if(isNaN(v.target.innerText -1)) return;
        console.log(v.target.nodeName)
        console.log(v.target.innerText -1)
        let nodeArr = document.querySelectorAll("#pageNum span");
        nodeArr.forEach((item)=>{
            item.classList.remove('spanActive');
        })
        nodeArr[v.target.innerText-1].classList.add("spanActive");
        getPageNum(newArr[v.target.innerText-1])
    }
    createLogin();
    jump();
});


function clickBtn(node,obj){
    node.onmouseover = ()=>{
        //node.style.color = "#ccc";
        
        node.style.background = "#00bdff";
    }
    node.onmouseout = ()=>{
        //node.style.color = "#000";
        node.style.background = "#fff";
    };
};

let mask = document.querySelector("#mask");

loginBtn.addEventListener("click",()=>{
   
    mask.style.display = "block";

    mask.addEventListener("click",()=>{
        mask.style.display = "none";
    });
})

    createLogin();
    jump();
}

